let defalutRect = {
  x: 0,
  y: 0,
  w: 0,
  h: 0,
};
console.log(typeof localStorage.getItem("list"));
new Vue({
  el: "#app",
  data: {
    isActive: false,
    rectList: localStorage.getItem("list")
      ? JSON.parse(localStorage.getItem("list"))
      : [],
    // rectList:[],
    isDraw: false,
    rect: defalutRect,
    imgSrc: localStorage.getItem("imgSrc") || "",
    saveShow: false,
    showList: true,
    imgCode: "",
    wrapStyle: {
      h: 0,
      w: 0,
    },
    ispreview: false,

    // imgShow:,
  },
  mounted() {
    console.log(this.$refs["img"]);
    // this.$refs['img'].ad
    this.$refs["img"].addEventListener("mouseup", this.handleImgMouseup);
    this.$refs["img"].addEventListener("mousedown", this.handleImgMousedown);
    // document.addEventListener
  },
  methods: {
    handleImgMousedown(e) {
      if (this.saveShow) return;
      this.isDraw = true;
      this.$refs["img"].addEventListener("mousemove", this.handleImgMousemove);
      // & 记录下坐标
      this.clickCoord = {
        x: e.offsetX,
        y: e.offsetY,
      };
      let rect = {
        x: e.offsetX,
        y: e.offsetY,
      };

      this.rect = rect;
    },
    handleImgMouseup(e) {
      this.$refs["img"].removeEventListener(
        "mousemove",
        this.handleImgMousemove
      );
      this.isDraw = false;
      this.saveShow = true;
      // this.rect = defalutRect;
    },
    handleImgMousemove(e) {
      let rect = { ...this.rect };
      rect.w = e.offsetX - this.clickCoord.x;
      rect.h = e.offsetY - this.clickCoord.y;

      /*  if (e.offsetX > rect.x) {
        rect.w = e.offsetX - this.clickCoord.x;
        
      }else{
        rect.x = e.offsetX;
        rect.w =  this.clickCoord.x - e.offsetX ;

      }
      
      if (e.offsetY > rect.y) {
        rect.h = e.offsetY - this.clickCoord.y;
        

      }else{
        rect.y = e.offsetY;
        rect.h =  this.clickCoord.y - e.offsetY ;
        
      } */

      this.rect = rect;
      // console.log(this.rect);
      // console.log(this.rect);
    },
    imgLoad(e) {
      console.dir(e.target.height);
      console.log(e.target.height);
      console.log(e.target.width);
      this.wrapStyle = {
        w: e.target.width,
        h: e.target.height,
      };
    },
    handleImgErr() {
      console.log("图片加载错误了");
    },
    // 点击保存
    handleSave() {
      let color = `rgba(${randomNum(200, 250)},${randomNum(0, 200)},${randomNum(
        0,
        200
      )})`;
      this.rectList.push({ ...this.rect, color, link: "未设置" });
      this.clearBg();
    },
    // 点击取消
    handleCancel() {
      this.clearBg();
    },
    clearBg() {
      this.saveShow = false;
      this.rect = defalutRect;
    },
    clerStore() {
      localStorage.setItem("list", "");
    },
    inputChange(e, index) {
      console.log(e.target.value);
    },
    createCode() {
      let usemap = "aa";

      let areaCode = this.rectList.map(
        (item,index) => {
          if (item.link === '未设置') {
            alert(`${index + 1}区域的链接属于未设置状态，请尽快设置`)
          }
          return `
          <area
            coords="${item.x},${item.y},${item.x + item.w},${item.h + item.y}"
            href="${item.link}"
            target="_blank"
            style="outline: none"
          />
        `
        }
      );

      let imgCode = `
      <img
        src="${this.imgSrc}"
        usemap="#${usemap}"
      />
      <map map name="${usemap}">
        ${areaCode}
      </map>
      `;
      this.imgCode = imgCode;
      console.log(imgCode);
    },
    removeItem(i) {
      console.log(i);
      this.rectList.splice(i, 1);
    },
    preview() {
      if (!this.ispreview) {
        this.createCode();
      }

      this.ispreview = !this.ispreview;
    },
  },
  computed: {
    gerWrapStyle() {
      return `width: ${this.wrapStyle.w}px; height: ${this.wrapStyle.h}px;background: url(${this.imgSrc})`;
    },
  },
  updated(e) {},
  watch: {
    imgSrc(newValue, oldVule) {
      console.log(newValue);
      this.rectList = [];
      localStorage.setItem("imgSrc", newValue);
    },
    rectList: {
      handler(newValue, oldVule) {
        localStorage.setItem("list", JSON.stringify(newValue));
      },
      deep: true,
    },
  },
});

/*   <img
      src="https://img.alicdn.com/imgextra/i4/3307354365/O1CN01K9VHC81i7DUDg7MFN_!!3307354365.png"
      usemap="#CYYZR"
    />

 < map name="CYYZR">
    <area
        coords="337,326,711,714"
        href="https://www.gaoding.com/introduction"
        target="_blank"
        style="outline: none"
      />
   
    <area
        coords="13,423,385,816"
        href="https://www.baidu.com/"
        target="_blank"
        style="outline: none"
      />
   
    <area
        coords="590,516,948,891"
        href="https://www.zhihu.com/"
        target="_blank"
        style="outline: none"
      />
    </>
    
    */
